<template>
  <div style="height: 100%">
  </div>
</template>

<script>
  import Format from '@/utils/format'

  export default {
    // type  testAll test1 test2
    props: ['type'],
    data() {
      return {
        titleData: '',
        legendName: [],
        seriesList: [],
        charts: '',
        xList: [],
        timerList: [],
        monitorName: '',
      }
    },
    computed: {
      options() {
        const Echarts = require('echarts')

        function formatter(params, ticket, callback) {
          var contentArr = []
          for (var i = 0; i < params.length; i++) {
            var data = params[i]
            contentArr.push(data.marker + data.seriesName)
            if (i === 0) {
            }
            contentArr.push('位移' + '：' + data.value + 'mm')
          }
          contentArr.push('时间：' + data.name)
          return contentArr.join('<br/>')
        }

        return {
          echartsTime: [],
          title: {
            text: this.titleData,
            x: 'center'
          },
          //提示框组件
          tooltip: {
            // 设置为坐标轴触发
            trigger: 'axis',
            // 提示框悬浮内容格式器
            formatter: (params, ticket, callback) => {
              var contentArr = []
              for (var i = 0; i < params.length; i++) {
                var data = params[i]
                if (i === 0) {
                  contentArr.push(Format(new Date(data.value[0])))
                }
                contentArr.push(data.marker + data.seriesName + '位移值：' + data.value[1] + 'mm')
              }
              let remark = params[0]?.data?.remark || ''
              remark && contentArr.push(`<p style='font-size:10px;' >${this.sliceStr(remark)}</p>`)
              return contentArr.join('<br/>')
            },
          },
          // 图例组件
          legend: {
            data: this.legendName,
            y: 'top',
            x: 'right',
            padding: [60, 5, 0, 0],
            // 设置为可滚动的图例
            type: 'scroll',
            orient: 'vertical'
          },
          // 直角坐标系内绘图网格
          grid: {
            left: 50,
            right: 170,
            bottom: 40,
            // 区域是否包含坐标轴的刻度标签
            containLabel: false
          },
          // 工具栏。内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          // grid x轴
          xAxis: {
            splitLine: {
              show: false
            },
            type: 'time',
            boundaryGap: false,
            axisLine: {onZero: false},
            axisLabel: { // 坐标轴标签样式设置
              formatter: function (value, index) { // 坐标轴文字展示样式处理
                const date = new Date(value)
                if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
                  return Echarts.format.formatTime('yyyy-MM-dd', new Date(value))
                }
                return Echarts.format.formatTime('hh:mm:ss', new Date(value))
              },
            }
          },
          dataZoom: [
            {
              show: true,
              realtime: true,
              handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
              handleSize: '100%',
              handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
              }
            },
            {
              type: 'inside',
              realtime: true
            }
          ],
          yAxis: {

            max: function (value) {
              if (value.max < 30) {
                return 30;
              }
              return Math.ceil(value.max);//向上取整

            },
            name: '位移（mm）',
            nameTextStyle: {
              color: 'black',
              fontSize: 16,
              padding: [0, 0, 10, 0]
            },
            type: 'value'
          },
          series: this.seriesList
        }
      }
    },
    methods: {
      echartClear(){
        this.charts.clear()
      },
      updateEchart(list, monitorName, times, name, index) {

        this.legendName = []
        this.seriesList = []
        if (name == '基准点') {
          let dataLists = []
          this.titleData = monitorName + '真实位移'
          list.map((x) => {
            this.legendName.push(x.sensorName)
            this.seriesList.push({
              name: x.sensorName,
              type: 'line',

              smooth: false,
              symbol: 'none',
              symbolSize: 4,
              data: x.realValue
            },)
          })

        } else {
          let dataLists = []
          for (let i = 1; i < list.length; i++) {
            if (index === i) {
              this.titleData = list[i].sensorName + '相对位移'

              this.legendName.push(list[i].sensorName)
              this.seriesList.push({
                name: list[i].sensorName,
                type: 'line',

                smooth: false,
                symbol: 'none',
                symbolSize: 4,
                data: list[i].relativeValue
              },)
            }


          }
        }

        this.charts.setOption(this.options)
        this.charts.resize()
      },
      // echart随着窗口改变
      echartResize() {
        this.charts.resize()
      }
    },
    created() {
    },
    mounted() {
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
      window.addEventListener('resize', this.echartResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.echartResize)
    }
  }
</script>
